$order: 3;
$width: 90px;
$speed: 1;

@mixin pieces() {
  $mid-z: $order / 2 + 0.5;
  @for $x from 1 through $order {
    @for $y from 1 through $order {
      @for $z from 1 through $order {
        .piece-#{$x}-#{$y}-#{$z} {
          transform: translate3d(
            ($x - 1) * $width,
            ($y - 1) * $width,
            ($z - $mid-z) * $width
          );
        }
      }
    }
  }
}

@mixin rotate($x) {
  @keyframes rotate-#{$x} {
    0% {
      transform: unquote('rotate#{$x}(0)');
    }
    33.3% {
      transform: unquote('rotate#{$x}(360deg)');
    }
    100% {
      transform: unquote('rotate#{$x}(360deg)');
    }
  }
}

@keyframes circle {
  0% {
    transform: rotate3d(1, 0, 1, 0);
  }
  100% {
    transform: rotate3d(1, 1, 0, 360deg);
  }
}

@include rotate('x') @include rotate('y') @include rotate('z') @keyframes
  rotate-x-y {
  0% {
    transform: rotateX(0) rotateY(0);
  }
  33.3% {
    transform: rotateX(360deg) rotateY(0);
  }
  66.7% {
    transform: rotateX(360deg) rotateY(360deg);
  }
  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}

@keyframes rotate-y-z {
  0% {
    transform: rotateY(0) rotateZ(0);
  }
  33.3% {
    transform: rotateY(0) rotateZ(0);
  }
  66.7% {
    transform: rotateY(360deg) rotateZ(0);
  }
  100% {
    transform: rotateY(360deg) rotateZ(360deg);
  }
}

@keyframes rotate-x-z {
  0% {
    transform: rotateX(0) rotateZ(0);
  }
  33.3% {
    transform: rotateX(360deg) rotateZ(0);
  }
  66.7% {
    transform: rotateX(360deg) rotateZ(0);
  }
  100% {
    transform: rotateX(360deg) rotateZ(360deg);
  }
}

.cube-container {
  position: relative;
  margin: 30px auto;
  height: 600px;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1500px;
  backface-visibility: hidden;
}

.cube {
  position: absolute;
  width: $width * $order;
  height: $width * $order;
  animation: circle 9s linear infinite;
  transform-style: preserve-3d;
  transform: rotate3d(1, 1, 1, 30deg);
}

.piece-container {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: all linear 1s;

  &.x-2 {
    animation: rotate-x #{9s * $speed} ease #{0s * $speed} infinite;
  }

  &.y-2 {
    animation: rotate-y #{9s * $speed} ease #{3s * $speed} infinite;

    &.x-2 {
      animation: rotate-x-y #{9s * $speed} ease infinite;
    }
  }

  &.z-2 {
    animation: rotate-z #{9s * $speed} ease #{6s * $speed} infinite;

    &.x-2 {
      animation: rotate-x-z #{9s * $speed} ease infinite;
    }

    &.y-2 {
      animation: rotate-y-z #{9s * $speed} ease infinite;
    }
  }
}

.piece {
  width: $width;
  height: $width;
  transform-style: preserve-3d;
}

@include pieces() .face {
  position: absolute;
  width: $width - 8;
  height: $width - 8;
  border: 4px solid #888;
  border-radius: 8px;
  transform-style: preserve-3d;
  opacity: 0.8;

  &.face-up {
    transform: rotateX(90deg) translateZ($width / 2);
    background-color: yellow;
  }

  &.face-down {
    transform: rotateX(-90deg) translateZ($width / 2);
    background-color: white;
  }

  &.face-left {
    transform: rotateY(-90deg) translateZ($width / 2);
    background-color: red;
  }

  &.face-right {
    transform: rotateY(90deg) translateZ($width / 2);
    background-color: orange;
  }

  &.face-front {
    transform: translateZ($width / 2);
    background-color: green;
  }

  &.face-back {
    transform: rotateX(180deg) translateZ($width / 2);
    background-color: blue;
  }

  &.face-inside {
    background-color: #fff;
    opacity: 0.2;
  }
}

.form {
  display: flex;
  justify-content: center;
  align-items: center;

  input {
    width: 600px;
    height: 40px;
    border: 0;
    border-bottom: 1px solid green;
    font-size: 2em;
    font-family: monospace, 'Courier New', Courier;
    text-align: center;
    outline: none;
  }
}
